<template>
  <div id="app">
    <div class="main_container">
      <header class="header_menu">
        <span class="header_logo"><img src="../assets/home_logo.png" alt=""></span>
        <span class="header_title">保密业务管理平台</span>
        <button class="header_btn" :class="{active: activeBtn == key}" v-for="(item, key) in menuBtns" :key="key" @click="goComponent(key, item.value)">{{item.name}}</button>
        <!-- <button @click="goComponent('mimi','mimi')" class="header_btn active">定密管理</button>
        <button @click="goComponent('alarm','alarm')" class="header_btn">系统管理</button> -->
      </header>
      <!-- component 组件中， :is 的值是对应的组件的名字 -->
      <template v-if="name === 'config'">
        <div class="all-contain">
          <!-- 策略配置整页显示（不显示左侧菜单栏） -->
          <component :is="lay" :name="name" class="all"></component>
        </div>
      </template>
      <!-- 显示左侧菜单栏 -->
      <template v-else>
        <div class="contain">
          <component :is="layout" :name="name" :key="name" class="all"></component>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import layout from './Layout'
import lay from './Lay'
export default {
  name: 'App',
  components: {
    layout,
    lay
  },
  data() {
    return {
      name: 'mimi',
      layout: 'layout',
      lay: 'lay',
      activeBtn: 'mimi',
      // menuBtns: {
      //   mimi: {
      //     name: '基础信息管理',
      //     value: 'mimi'
      //   },
      //   status: {
      //     name: '环境运行状态',
      //     value: 'status'
      //   },
      //   alarm: {
      //     name: '告警分析',
      //     value: 'alarm'
      //   },
      //   user: {
      //     name: '深度分析',
      //     value: 'userBehavior'
      //   },
      //   config: {
      //     name: '策略配置',
      //     value: 'config'
      //   },
      // }
    }
  },
  methods: {
    goComponent(key, name) {
      this.activeBtn = key
      this.name = name
      this.$router.push({ path: '/' + name })
    }
  },
  computed: {
    // 根据 finalURoutes 获取 menuBtns 
    menuBtns() {
      const base = {}
      // console.log(this.$store.state.user.finalURoutes)
      this.$store.state.user.finalURoutes.forEach(item => {
        if (item.path === '/') {
          item.children.forEach(one => {
            if (one.path !== '*') {
              let val = one.path.split('/')[1]
              base[val] = {
                value: val,
                name: one.label
              }
            }
          })
        }
      })
      // console.log(base)
      return base
    }
  }
}
</script>

<style lang='scss'>
.main_container {
  height: 100%;
  .header_menu {
    width: 100%;
    height:54px;
    background-color: #202732;
    color:#fff;
    display: flex;
    align-items: center;
    // box-shadow: 10px 10px 5px red;
    // -webkit-box-shadow: 10px 10px 5px red;
    .header_logo img {
      width: 54px;
      height: 54px;
      margin: 0 5px;
    }
    .header_title {
      font-size: 20px;
      padding: 0 20px 0 0;
    }
    .header_btn {
      background-color: #202732;
      height: 40px;
      color: #fff;
      padding: 12px;
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      -webkit-appearance: none;
      border: 0;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      transition: .1s;
      font-weight: 500;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      border-radius: 4px;
      margin-right: 10px;
      font-size: 14px;
    }
    .active {
      background-color: #cc302e;
    }
  }
  .contain {
    width: 100%;
    height: calc(100% - 54px);
    .all {
      height: 100%;
    }
  }
  .all-contain {
    width: calc(100% - 30px);
    height: calc(100% - 84px);
    background-color: #f9f9f9;
    // overflow-y: auto;
    padding: 15px;
    .all {
      height: 100%;
      &>div {
        height: 100%;
      }
    }
  }
}
</style>
